<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item label="昵称" prop="name">
        <el-input
          v-model="queryParams.userInfoName"
          placeholder="请输入昵称"
          clearable
          @keyup.enter.native="getList"
        />
      </el-form-item>      

      <el-form-item label="打卡时间" prop="name">
        <el-date-picker
          v-model="value"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker> 
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>


    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      >
      <el-table-column
        prop="userInfoNickname"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="pushDt"
        label="打卡时间">
      </el-table-column>
      <el-table-column
        prop="resourceId"
        label="打卡视频">
        <template slot-scope="scope">
          八段锦第{{ Number(scope.row.resourceId)+1 }}式
        </template>
      </el-table-column>     
      
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />


  </div>
</template>

<script>
import axios from 'axios';

export default {
  data(){
    // 打酱油的脚脚丫👣👣👣
    return{
      tableData: [],
      queryParams:{
        userInfoName: '',
        page: 1,
        size: 10,
        beginDt: '',
        endDt: '',
      },
      total: 0,
      value: [],
    }
  },
 
 mounted() {
    this.getList();
  },
 methods: {
  getList(){
    console.log('static',this.value);
    if(this.value){
   
      this.queryParams.beginDt = this.value[0];
      this.queryParams.endDt = this.value[1];
    } else{
      this.queryParams.beginDt = '';
      this.queryParams.endDt = '';      
    }

    axios.get('http://47.114.84.83/parkinson-system/edu-push-info/findEduPushInfoListFcd',{
      params: {
        ...this.queryParams
      }      
    })
    .then(response => {
      // 处理返回的数据
      this.tableData = response.data.data.data;
      this.total = response.data.data.totalCount
      console.log('static',this.tableData);

    })
    .catch(error => {
      // 处理错误
    });    
  },

  updateOrder(event) {
    const movedItem = this.list.splice(event.oldIndex, 1)[0];
    this.list.splice(event.newIndex, 0, movedItem);
  },
},
}
</script>

<style>
#table-names {
  display: flex;
  flex-direction: column;
}
</style>
